<template>
    <div class="container">
        <div class="content_wrapper decoratePgaeWrap">
            <div class="flex box-wrapper">
                <div class="left-wrapper">
                    <div class="left-box tab-name">
                        <div @click="checkPage('investment_promotion_homepage')" :class="'left-cont tab-item ' + (type == 'investment_promotion_homepage' ? 'current' : '')">招商首页</div>
                        <div @click="checkPage('investment_plan')" :class="'left-cont tab-item ' + (type == 'investment_plan' ? 'current' : '')">招商计划</div>
                        <div @click="checkPage('investment_criteria')" :class="'left-cont tab-item ' + (type == 'investment_criteria' ? 'current' : '')">招商标准</div>
                        <div @click="checkPage('settling_process')" :class="'left-cont tab-item ' + (type == 'settling_process' ? 'current' : '')">入驻流程</div>
                    </div>
                </div>
                <div v-if="!loading" class="bg-layout">
                    <template v-if="type == 'investment_promotion_homepage'">
                        <div class="left-box" style="background-color: #FFFFFF">
                            <HomePage :module="module1"></HomePage>
                        </div>
                        <div class="right-box">
                            <div v-for="(item,index) in module1" class="message-item">
                                <div class="title">
                                    {{ item.title }}
                                </div>
                                <DialogForm
                                    :params="{ module: module1,decorate_sn:'investment_promotion_homepage',index:index }"
                                    isDrawer
                                    path="adminMerchant/investment/src/InvestmentInfo"
                                    title="编辑描述"
                                    width="600px"
                                >
                                    <el-button size="small" type="primary">编辑</el-button>
                                </DialogForm>
                            </div>
                        </div>
                    </template>
                    <template v-if="type == 'investment_plan'">
                        <div class="left-box">
                            <Plan :module="module2"></Plan>
                        </div>
                        <div class="right-box">
                            <div v-for="(item,index) in module2" class="message-item">
                                <div class="title">
                                    {{ item.title }}
                                </div>
                                <DialogForm
                                    :params="{ module: module2,decorate_sn:'investment_plan',index:index }"
                                    isDrawer
                                    path="adminMerchant/investment/src/InvestmentInfo"
                                    title="编辑描述"
                                    width="600px"
                                >
                                    <el-button size="small" type="primary">编辑</el-button>
                                </DialogForm>
                            </div>
                        </div>
                    </template>
                    <template v-if="type == 'investment_criteria'">
                        <div class="left-box">
                            <Standard :module="module3"></Standard>
                        </div>
                        <div class="right-box">
                            <div v-for="(item,index) in module3" class="message-item">
                                <div class="title">
                                    {{ item.title }}
                                </div>
                                <DialogForm
                                    :params="{ module: module3,decorate_sn:'investment_criteria',index:index }"
                                    isDrawer
                                    path="adminMerchant/investment/src/InvestmentInfo"
                                    title="编辑描述"
                                    width="600px"
                                >
                                    <el-button size="small" type="primary">编辑</el-button>
                                </DialogForm>
                            </div>
                        </div>
                    </template>
                    <template v-if="type == 'settling_process'">
                        <div class="left-box"  style="background-color: #FFFFFF">
                            <SettlingProcess :module="module4"></SettlingProcess>
                        </div>
                        <div class="right-box">
                            <div v-for="(item,index) in module4" class="message-item">
                                <div class="title">
                                    {{ item.title }}
                                </div>
                                <DialogForm
                                    :params="{ module: module4,decorate_sn:'settling_process',index:index }"
                                    isDrawer
                                    path="adminMerchant/investment/src/InvestmentInfo"
                                    title="编辑描述"
                                    width="600px"
                                >
                                    <el-button size="small" type="primary">编辑</el-button>
                                </DialogForm>
                            </div>
                        </div>
                    </template>
                </div>
                <a-spin :spinning="loading" style="width:100%;margin-top:100px"/>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import "@/views/decorate/decorate/src/css/decorate.less";
import { ref, onMounted } from "vue";
import { getDecorateDiscrete, updateDecorateDiscrete } from "@/api/decorate/decorateDiscrete";
import { message } from "ant-design-vue";
import SettlingProcess from "@/views/adminMerchant/investment/src/SettlingProcess.vue";
import { DialogForm } from "@/components/dialog";
import Standard from "@/views/adminMerchant/investment/src/Standard.vue";
import Plan from "@/views/adminMerchant/investment/src/Plan.vue";
import HomePage from "@/views/adminMerchant/investment/src/HomePage.vue";

const type = ref("investment_promotion_homepage");
const loading = ref(true);
const module1: any = ref([
    {
        title: "招商Banner设置",
        images:[],
        content: ""
    }, {
        title: "平台模式流程图设置",
        content: "",
        image:''
    }, {
        title: "自营模式流程图设置",
        content: "",
        image:''
    },
]);
const module2: any = ref([
    {
        title: "",
        content: ""
    }
]);
const module3: any = ref([
    {
        title: "",
        content: ""
    }, {
        title: "",
        content: ""
    }, {
        title: "",
        content: ""
    }
]);
const module4: any = ref([
    {
        size: "1",
        align: "1",
        title: "",
        content: ""
    },
    {
        size: "0",
        align: "2",
        title: "",
        content: ""
    }, {
        size: "0",
        align: "1",
        title: "",
        content: ""
    }, {
        size: "2",
        align: "2",
        title: "",
        content: ""
    }, {
        size: "0",
        align: "1",
        title: "",
        content: ""
    }, {
        size: "2",
        align: "1",
        title: "",
        content: ""
    }, {
        size: "2",
        align: "2",
        title: "",
        content: ""
    }, {
        size: "0",
        align: "1",
        title: "",
        content: ""
    }, {
        size: "0",
        align: "2",
        title: "",
        content: ""
    }
]);
// 表单通过验证后提交
onMounted(() => {
    // 获取详情数据
    fetchDecorateDiscrete();
});
const checkPage = (val: string) => {
    type.value = val;
    fetchDecorateDiscrete();
};
const fetchDecorateDiscrete = async () => {
    try {
        loading.value = true;
        const result = await getDecorateDiscrete({
            decorate_sn: type.value
        });
        if(result.item){
            if (type.value == "investment_promotion_homepage") {
                Object.assign(module1.value, result.item?.data);
            }
            if (type.value == "investment_plan") {
                Object.assign(module2.value, result.item?.data);
            }
            if (type.value == "investment_criteria") {
                Object.assign(module3.value, result.item?.data);
            }
            if (type.value == "settling_process") {
                Object.assign(module4.value, result.item?.data);
            }
        }else{
            Object.assign(module1.value, []);
            Object.assign(module2.value, []);
            Object.assign(module3.value, []);
            Object.assign(module4.value, []);
        }

    } catch (error: any) {
        message.error(error.message);
    } finally {
        loading.value = false;
    }
};
</script>
<style lang="less" scoped>
.bg-layout {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;

    .left-box {

        width: 900px;
        height: 700px;
        overflow-y: auto;
        background-color: #f5f5f5;
        &::-webkit-scrollbar {
            display: none;
        }

        //width: 1200px;
        //height: 4400px;
    }

    .right-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;

        .message-item {
            display: flex;
            padding-bottom: 20px;
            box-sizing: border-box;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #eee;
            margin-bottom: 30px;

            .title {
                font-weight: 700;
                font-size: 14px;
            }
        }
    }
}
</style>
